<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Tab - Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <script src="/dist/ionic.js"></script>
  <script type="text/javascript">
    window.Ionic.config = {useRouter: true};
  </script>
  <script>

    class PageOne extends HTMLElement {
      connectedCallback() {
        this.innerHTML = this.getHtml();

        const nextButton = this.querySelector('ion-button.next');
        if (nextButton) {
          nextButton.addEventListener('click', () => {
            this.goToNext();
          });
        }

        const backButton = this.querySelector('ion-button.back');
        if (backButton) {
          backButton.addEventListener('click', () => {
            this.goBack();
          });
        }
      }

      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page One</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page One
            <div>
              <ion-button class="next">Go to Page Two</ion-button>
            </div>
          </ion-content>
        `;
      }

      goToNext() {
        const nav = this.closest('ion-nav');
        nav.push(this.getNextPage());
      }

      getNextPage() {
        return 'page-two';
      }

      goBack() {
        const nav = this.closest('ion-nav');
        nav.pop();
      }
    }

    class PageTwo extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Two
            <div>
              <ion-button class="next">Go to Page Three</ion-button>
            </div>
            <div>
              <ion-button class="back">Go Back</ion-button>
            </div>
          </ion-content>
        `;
      }

      getNextPage() {
        return 'page-three';
      }
    }

    class PageThree extends PageOne {
      getHtml() {
        return `
        <ion-header>
          <ion-toolbar>
            <ion-title>Page Three</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding>
          Page Three
          <div>
            <ion-button class="back">Go Back</ion-button>
          </div>
        </ion-content>
        `;
      }
    }

    class PageFour extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Four</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Four
            <div>
              <ion-button class="next">Go to Page Five</ion-button>
            </div>
          </ion-content>
        `;
      }

      getNextPage() {
        return 'page-five';
      }
    }

    class PageFive extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Five</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Five
            <div>
              <ion-button class="next">Go to Page Six</ion-button>
            </div>
            <div>
              <ion-button class="back">Go Back</ion-button>
            </div>
          </ion-content>
        `;
      }

      getNextPage() {
        return 'page-six';
      }
    }

    class PageSix extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Six</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Six
            <div>
              <ion-button class="back">Go Back</ion-button>
            </div>
          </ion-content>
        `;
      }
    }

    class PageSeven extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Seven</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Seven
            <div>
              <ion-button class="next">Go to Page Eight</ion-button>
            </div>
          </ion-content>
        `;
      }

      getNextPage() {
        return 'page-eight';
      }
    }

    class PageEight extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Eight</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Eight
            <div>
              <ion-button class="next">Go to Page Nine</ion-button>
            </div>
            <div>
              <ion-button class="back">Go Back</ion-button>
            </div>
          </ion-content>
        `;
      }

      getNextPage() {
        return 'page-nine';
      }
    }

    class PageNine extends PageOne {
      getHtml() {
        return `
          <ion-header>
            <ion-toolbar>
              <ion-title>Page Nine</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding>
            Page Nine
            <div>
              <ion-button class="back">Go Back</ion-button>
            </div>
          </ion-content>
        `;
      }
    }


    customElements.define('page-one', PageOne);
    customElements.define('page-two', PageTwo);
    customElements.define('page-three', PageThree);
    customElements.define('page-four', PageFour);
    customElements.define('page-five', PageFive);
    customElements.define('page-six', PageSix);
    customElements.define('page-seven', PageSeven);
    customElements.define('page-eight', PageEight);
    customElements.define('page-nine', PageNine);

    </script>
</head>
<body>

  <ion-app useRouter='false'>
    <ion-tabs>
      <ion-tab tab-title="Plain List" tab-icon="star" path="">
        <ion-nav root="page-one"></ion-nav>
      </ion-tab>

      <ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
        <ion-nav root="page-four"></ion-nav>
      </ion-tab>

      <ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
        <ion-nav root="page-seven"></ion-nav>
      </ion-tab>
    </ion-tabs>
  </ion-app>
</body>
</html>
